// 预先设置一个变量来存MediaRecorder实例
let mediaRecorder = null;
// 首先打开麦克风
function record() {
  navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
    let chunks = [];
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();

    // 录音开始事件监听（即调用 mediaRecorder.start()时会触发该事件）
    mediaRecorder.onstart = () => {
      console.log("record start");
    };

    // 录音可用事件监听，发生于mediaRecorder.stop()调用后，mediaRecorder.onstop 前
    mediaRecorder.ondataavailable = (e) => {
      console.log("dataavailable");
      console.log(e);
      chunks.push(e.data);
    };

    // 录音结束事件监听，发生在mediaRecorder.stop()和 mediaRecorder.ondataavailable 调用后
    mediaRecorder.onstop = () => {
      console.log("record end");
      // 获取到录音的blob
      let blob = new Blob(chunks, { type: "audio/webm;codecs=opus" });
      console.log("🚀 ~ file: record.js:27 ~ navigator.mediaDevices.getUserMedia ~ blob:", blob);

      //   var saveDatas = getDataFromLocal("results");
      //   // 上面是拿到我自己的数据，数据的格式是Json字符串
      //   var newBlob = new Blob([JSON.stringify(saveDatas)], { type: "application/json" });

      // 创建一个blob的对象，把Json转化为字符串作为我们的值
      let url = window.URL.createObjectURL(blob);
      // 上面这个是创建一个blob的对象连链接，
      // 然后创建一个链接元素，是属于 a 标签的链接元素，所以括号里才是a，
      let link = document.createElement("a");
      link.href = url;
      // 把上面获得的blob的对象链接赋值给新创建的这个 a 链接
      link.setAttribute("download", "录音.wav");
      // 设置下载的属性（所以使用的是download），这个是a 标签的一个属性
      // 后面的是文件名字，可以更改
      link.click();
      // 使用js点击这个链接

      //  将blob转换为file对象，名字可以自己改，一般用于需要将文件上传到后台的情况
      // let file = new window.File([blob], "record.webm");

      // 将blob转换为地址，一般用于页面上面的回显，这个url可以直接被 audio 标签使用
      // let url = (window.URL || webkitURL).createObjectURL(blob);
    };
  });
}
// 录音结束事件，在需要结束录音时调用，录音结束后的操作请在 mediaRecorder.onstop 里面写
function stopRecord() {
  mediaRecorder && mediaRecorder.stop();
}


